<!-- 编辑弹窗 -->
<template>
  <ele-modal width="720px"
             :visible="visible"
             :close-on-click-modal="true"
             custom-class="ele-dialog-form"
             :title="isUpdate ? '修改菜单' : '添加菜单'"
             @update:visible="updateVisible">
    <el-form ref="form"
             :model="form"
             :rules="rules"
             label-width="92px">
      <el-row :gutter="15">
        <el-col v-bind="styleResponsive ? { sm:  16 } : { span: 16 }">
          <el-form-item label="菜单类型:">
            <el-radio-group v-model="form.type">
              <el-radio :label="1">目录</el-radio>
              <el-radio :label="2">点击按钮</el-radio>
              <el-radio :label="3">跳转链接</el-radio>

            </el-radio-group>
          </el-form-item>

        </el-col>
        <el-col v-bind="styleResponsive ? { sm:  16 } : { span: 8 }">
          <el-form-item label="上级菜单:">
            <ele-tree-select clearable
                             v-model="form.pid"
                             :data="menuList"
                             label-key="name"
                             value-key="id"
                             default-expand-all
                             placeholder="请选择上级菜单" />
          </el-form-item>
          <el-form-item label="菜单名称:"
                        prop="name">
            <el-input clearable
                      v-model="form.name"
                      placeholder="请输入菜单名称" />
          </el-form-item>
        </el-col>

      </el-row>
      <div style="margin: 6px 0 28px 0">
        <el-divider />
      </div>
      <el-row :gutter="15">
        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
          <el-form-item name="url"
                        v-if="form.type==3">
            <template v-slot:label>

              <span>
                链接地址
              </span>
            </template>
            <el-input clearable
                      v-model="form.url"
                      placeholder="请输入链接地址" />
          </el-form-item>
          <!-- <el-form-item name="url"
                        v-if="form.type==2">
            <template v-slot:label>

              <span>
                key
              </span>
            </template>
            <el-input clearable
                      v-model="form.key"
                      placeholder="请输入链接地址" />
          </el-form-item> -->
        </el-col>
        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">

          <el-form-item label="排序号:"
                        prop="sort">
            <el-input-number :min="0"
                             v-model="form.sort"
                             placeholder="请输入排序号"
                             controls-position="right"
                             class="ele-fluid ele-text-left" />
          </el-form-item>

        </el-col>
      </el-row>

    </el-form>
    <template v-slot:footer>
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button type="primary"
                 :loading="loading"
                 @click="save">
        保存
      </el-button>
    </template>
  </ele-modal>
</template>
  
  <script>

import { addmenu, editmenu } from '@/api/basicConfiguration/menu';

export default {
  components: {},
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object,
    // 上级菜单id
    parentId: Number,
    // 全部菜单数据
    menuList: Array
  },
  data () {
    const defaultForm = {

      pid: '',
      name: '',

      type: 1,

      url: '',


      sort: null,


    };
    return {
      defaultForm,
      // 表单数据
      form: { ...defaultForm },
      // 表单验证规则
      rules: {
        name: [
          {
            required: true,
            message: '请输入菜单名称',
            trigger: 'blur'
          }
        ],
        sort: [
          {
            required: true,
            message: '请输入排序号',
            trigger: 'blur'
          }
        ],
        meta: [
          {
            trigger: 'blur',
            validator: (_rule, value, callback) => {
              if (value) {
                const error = new Error('请输入正确的JSON格式');
                try {
                  const obj = JSON.parse(value);
                  if (typeof obj !== 'object' || obj === null) {
                    callback(error);
                    return;
                  }
                } catch (e) {
                  callback(error);
                  return;
                }
              }
              callback();
            }
          }
        ]
      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false
    };
  },
  computed: {

    // 是否开启响应式布局
    styleResponsive () {
      return this.$store.state.theme.styleResponsive;
    }
  },
  methods: {
    /* 保存编辑 */
    save () {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return false;
        }
        this.loading = true;
        const data = {
          ...this.form,
          // menuType 对应的值与后端不一致在前端处理

          pid: this.form.pid || 0
        };
        console.log(data)
        const saveOrUpdate = this.isUpdate ? editmenu : addmenu;
        saveOrUpdate(data)
          .then((msg) => {
            console.log(msg)
            this.loading = false;
            this.$message.success(msg.message);
            this.updateVisible(false);
            this.$emit('done');
          })
          .catch((e) => {
            this.loading = false;
            this.$message.error(e.message);
          });
      });
    },
    /* 更新visible */
    updateVisible (value) {
      this.$emit('update:visible', value);
    },
    /* menuType选择改变 */


    /* 判断是否是外链 */
    isUrl (url) {
      return !!(
        url &&
        (url.startsWith('http://') ||
          url.startsWith('https://') ||
          url.startsWith('//'))
      );
    },
    /* 判断是否是目录 */
    isDirectory (d) {
      return !!d.children?.length && !d.component;
    }
  },
  watch: {
    visible (visible) {
      if (visible) {
        if (this.data) {


          this.$util.assignObject(this.form, {
            ...this.data,

          });
          this.form.id = this.data.id
          console.log(this.form)
          this.isUpdate = true;
        } else {
          this.form.pid = this.pid ?? '';
          this.isUpdate = false;
        }
      } else {
        this.$refs.form.clearValidate();
        this.form = { ...this.defaultForm };
      }
    }
  }
};
  </script>
  